@charset "utf-8";
/*
 *	Author		：WoodyCai
 *	Time		：2017.06.14
 *	Abstract	：深银联集团官网样式文件
 *
 */

//scss
@import "base.scss";

/*
 *	Common
 */
html { font-size: 50px; }
body { background: #fff; font-size:0.24rem; line-height:1.5; font-weight:400;  color:#5a5a5a; font-family: "微软雅黑", "Microsoft YaHei", "宋体",Arial, Helvetica, sans-serif; padding-top:1.1rem; }
h1,h2,h3,h4,h5,b,strong,em { font-weight: 400; }
//iconfont

@font-face {
    font-family: 'iconfont';  /* project id 346978 */
    src: url('//at.alicdn.com/t/font_346978_ghitu39vni9newmi.eot');
    src: url('//at.alicdn.com/t/font_346978_ghitu39vni9newmi.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_346978_ghitu39vni9newmi.woff') format('woff'),
    url('//at.alicdn.com/t/font_346978_ghitu39vni9newmi.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_346978_ghitu39vni9newmi.svg#iconfont') format('svg');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:0.3rem;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

// .popup-shadow , .wx-shadow { display: none; position: fixed; z-index: 100; left:0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }

//color
$gold:#cda156;
$blue:#38519f;
$yellow:#ffd200;
$red:#ef0d0d;
$pink:#e90037;
$black:#000;
$gray:#5a5a5a;
$orange:#f87400;
$bordercolor:#e4e4e4;


.blue { color:$blue; }
.red { color:$red; }
.yellow { color:$yellow; }
.gray { color: #949494!important; }
.black { color:#000; }

.font14 { font-size:14px; }
.font16 { font-size:16px; }
.font18 { font-size:18px; }
.font24 { font-size:0.24rem!important; }
.font30 { font-size:0.3rem!important; }
// bg
.gray-bg { background:#f5f5f5; }
.white-bg { background: #fff; }
.black-bg { background: #282828; }
// pages
/* 分页 */
.page_wrap { height: 34px; margin: 40px 20px;  font: normal 14px/34px "微软雅黑",Arial; color: #999; 
  .pagination { height: 34px; text-align:center;
    li { display:inline-block; margin-right:10px; background: #fff; padding: 0 10px; min-width: 12px; height: 32px; font: normal 14px/32px "微软雅黑",Arial; text-align: center; border: solid 1px #ddd; }
    .rows { width: 100px; }
    li a { display:block; width:100%; height:100%; color:#999; }
    li:hover { background: $bordercolor; text-decoration:none; }
    li.active { color:#000; background: $yellow; border-color:$yellow; }
  }
  .page_total { float: left; margin-left:20px; height: 34px; }
  .page_skip { float: left;  height: 34px;  
    input { width:30px; text-align:center; height:32px; border:1px solid #ddd; margin:0 6px; }
  }
  .page_skip .sub_btn { display: inline-block; border: solid 1px #ddd; padding:0 5px; color: #333; }
  .page_skip .sub_btn:hover { background: #c71e21; color: #fff; border: solid 1px #c71e21 ;  }
}

// a
a { color:#000; @include transitionAll;
  &:hover { color:$blue; }
}

// btn
.btn { border:1px solid #000; line-height:34px; border-radius:4px; color:#000; background:#fff; text-align:center; }
.btn-yellow { border-color:$yellow; color:#fff; background:$yellow; }
.btn-red { border-color:$red; color:#fff; background:$red; }
.btn-black-line { border-color:$black; background:#fff; color:$black; }
.btn-red-line { border-color:$red; background:#fff; color:$red; }
.btn-yellow-line { border-color:$yellow; background:#fff; color:$yellow; }
.btn-blue-line { border-color:$blue; background:#fff; color:$blue; }
.btn-gray-line { border-color:$gray; background:#fff; color:$gray; }


.look-more { display: block; margin: 0 auto; letter-spacing:1px; font-size:14px; color:#000; line-height: 32px; text-align: center; width: 100px; background: $yellow; border-radius:16px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1);  }
.go-ask-wrap { display: flex; justify-content: center; }
.go-ask { background-color: #ffd307; font-size: 0.24rem; font-weight: normal; line-height: 0.4rem; color: #000;
    position: relative;
    padding: 0 0.2rem;
    background-image: linear-gradient(bottom, ffd200 0%,#ffe87e 100%);
    border-radius: 0.2rem;
    transition: none;
    box-shadow: 0rem .08rem 0rem 0rem #ff9000, 0rem .10rem .05rem #ccc;
}
.go-ask:active {
	top:.03rem;
    box-shadow: 0rem .04rem 0rem 0rem #ff9000, 0rem .05rem .05rem #ccc;
}

// img
.img100 { display: block; width: 100%; height: auto; }

//margin
.mgt10 { margin-top:.1rem!important; }
.mgt20 { margin-top:.2rem!important; }
.mgt30 { margin-top:.3rem!important; }
.mgt0 { margin-top:0!important; }

// height
.h20 { height: 0.2rem; }
.h40 { height: 0.4rem; }

// bg
.bg-gray { background: #f2f2f2; }

.boxShadow { box-shadow:2px 2px 5px rgba(150,150,150,0.1); border-radius:6px; }
.boxShadow02 { box-shadow:2px 2px 5px rgba(150,150,150,0.1); }

// iconpng
.icon-01 { background:url(../images/icon_01.png) no-repeat; background-size:10rem 10rem; }
.icon { background: url(../images/icon.png) no-repeat; }
.icon-02 { background: url(../images/icon_02.png) no-repeat; }

//header
#header { z-index: 90; background: #fff; width: 100%; box-sizing: border-box; align-items: center; position: fixed; top: 0; left: 0; display: flex; justify-content: space-between; padding: 0 0.1rem; height:1.1rem; box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);  
    #logo img { width: 3rem; margin-top: 0.2rem; height: auto; }
    .hot-tel { font-size: 0.36rem; color: #000; }
    .nav-btn { font-size: 0.6rem; color: $gray;}
}
.popup-nav-shadow { display: none; z-index: 100; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
#nav { transition:all 0.7s ease; transform:translateX(100%); opacity: 0; z-index: 110; position: fixed; top: 0; right: 0; width: 3rem; background: #fff; height: 100%;
    a { padding-left: 0.5rem; display: block; line-height: 1rem; font-size: 0.3rem; border-bottom: 1px solid $bordercolor; }
}


// footer
.copyright { @extend .gray-bg; padding-bottom:0.9rem; height: 1.5rem; display: flex; align-items: center; justify-content:center; color:#969696; }
.fix-ask-btn-wrap { position: fixed; bottom: 0; left: 0; display: flex; width:100%; height: 0.9rem; 
    a { flex:1; background: $blue; display: flex; justify-content: center; font-size: 0.3rem; color:#fff; align-items: center;
        &:nth-child(2) { background: $yellow; color:#000; }
        i { font-size: 0.45rem; margin-right: 0.1rem; }
    }
}
#newBridge #nb_toolbar_wrap { display: none!important;}

/* 首页 */
.index { 
    .swiper-pagination-bullet-active { background: $blue;}
    .mod-01 { display: flex; flex-wrap: wrap; padding:0.2rem 0;
        a { width: 25%; display: flex; margin-bottom: 0.1rem; flex-direction: column; align-items: center; justify-content: center;
            i { @extend .icon-01; width:1rem; height: 0.8rem; background-position-y:-3.1rem; }
            .i1 { background-position-x:0; }
            .i2 { background-position-x:-1rem; }
            .i3 { background-position-x:-2rem; }
            .i4 { background-position-x:-3rem; }
            .i5 { background-position-x:-4rem; }
            .i6 { background-position-x:-5rem; }
            .i7 { background-position-x:-6rem; }
            .i8 { background-position-x:-7rem; }
        }
    }
    .mod-02 { padding-bottom: 0.2rem; }
    .mod-03 { 
        .law-step { width: 7.2rem; margin: 0 auto;
            li { display: flex; align-items: center; padding: 0.25rem 0; border-bottom:1px solid $bordercolor; 
                &:first-child { padding-top: 0;}                
                &:last-child { border: none; }                
                img { width: 2.8rem; height:2rem; margin-right: 0.3rem;  }
                .text { flex: 1; }
                h4 { margin-bottom: 0.1rem; color: $blue; font-size: 0.3rem; }
            }
        }
    }
    .mod-04 { padding-bottom: 0.4rem;
        dl { width: 7.2rem; margin: 0 auto; border-bottom: 1px solid $bordercolor;
            dt { color: $black; line-height: 1rem; height: 1rem; font-size: 0.3rem;
                i { float: left; width: 0.8rem; height: 1rem; @extend .icon-01; background-position-y: -6rem;
                    &.i1 { background-position-x:-0.2rem; }
                    &.i2 { background-position-x:-1.2rem; }
                    &.i3 { background-position-x:-2.2rem; }
                    &.i4 { background-position-x:-3.2rem; }
                }
                span { float: right; color: $gray; transition: all 0.7s ease; }
                &.active span { color: $blue; transform: rotate(180deg);}
            }
            dd { line-height: 2; padding:0 0 0.2rem 0.8rem ; display: none;
                em { color: $blue; margin-right: 0.1rem; }
            }
        } 
    }
}

/* 关于我们 */ 
.aboutus {
    .mod-01 { line-height: 2; padding: 0 0.2rem 0.3rem 0.2rem; 
        .mod-title { padding: 0.2rem 0!important; }
    }
    .mod-02 ul { display: flex; flex-wrap: wrap; justify-content: space-around;
        li { width: 2.6rem; text-align: center; margin-bottom: 0.4rem; }
        h4 { line-height: 2; font-size: 0.3rem; }
        img { width:1.2rem; margin: 0 auto; display: block; }
    }
}
// 内页
// inside-banner
.inside-banner-wrap { height:3.5rem; overflow:hidden; position: relative;
    .inside-banner { display:block; width:100%; height: auto; } 
    .ani-t { position:absolute; box-sizing: border-box; width:100%; height:100%; top:0px; left:0px; font-size:0.36rem; color: #fff; text-align: center; justify-content: center; line-height: 1.4;  display: flex; align-items: center; flex-direction:column; }
    .ani-t-right { align-items: flex-end; text-align: right; padding: 0 0.6rem; }
    .ani-t-left { align-items: flex-start; text-align: left; padding: 0 0.6rem; }
    h2 { font-size: 0.4rem; font-weight: 400; line-height: 1.3; letter-spacing: 1px; }
    p { margin:0.1rem 0;}
    .consult-btn { margin-top: 0.2rem; line-height: 0.36rem;  width:1.5rem; font-size: 0.24rem; background: $yellow; border-radius: 0.18rem; text-align: center; }
    .line { margin-top: 0.2rem;  width: 0.6rem; height: 2px; background: $yellow; }
    .font48 { font-size: 0.48rem; }  
}

// inside-banner-02
.inside-banner-wrap-02 { height:320px; overflow:hidden;
    .inside-banner { @include abs(-360px,0); display:block; } 
    .ani-t { position:absolute; background:url(../images/anit.png) no-repeat; width:550px; height:100px; left:200px; }
    .ani-t01 { left:120px; top:110px; background-position:0 0; }
    .ani-t02 { left:120px; top:160px; background-position:0 -100px; }
    .ani-t03 { left:120px; top:110px; background-position:0 -200px; }
    .ani-t04 { left:120px; top:150px; background-position:0 -300px; }
    .ani-t05 { left:120px; top:110px; background-position:0 -400px; }
    .ani-t06 { left:120px; top:160px; background-position:0 -500px; }
    .ani-t07 { left:40px; top:110px; background-position:0 -600px; }
    .ani-t08 { left:40px; top:170px; background-position:0 -700px; }
    .ani-t09 { left:520px; top:70px; background-position:0 -800px; }
    .ani-t10 { left:420px; top:140px; background-position:0 -900px; }
    .ani-t11 { left:40px; top:80px; background-position:0 -1000px; }
    .ani-t12 { left:40px; top:140px; background-position:0 -1100px; }    
}

/* 
 * 法律服务页面
 */

.service-con {
    .mod-title { color:$gray; text-align:center; text-transform: uppercase; padding: 0.4rem 0;
        h2 { font-size:0.36rem; color:#282828; }
    }
}

// 如何服务
.how-serve { display: flex; flex-wrap: wrap; justify-content: space-between;
    li { min-width:30%; height:2rem; text-align: center; 
        i { display: block; width: 1rem; height: 1rem; margin: 0 auto; @extend .icon-01; 
            &.i1 { background-position: 0rem 0; }
            &.i2 { background-position: -1rem 0; }
            &.i3 { background-position: -2rem 0; }
            &.i4 { background-position: -3rem 0; }
            &.i5 { background-position: -4rem 0; }
            &.i6 { background-position: -5rem 0; }
            &.i7 { background-position: -6rem 0; }
            &.i8 { background-position: -7rem 0; }
            &.i9 { background-position: -8rem 0; }
            &.i10 { background-position: -9rem 0; }
            &.i11 { background-position: 0rem -1rem; }
            &.i12 { background-position: -1rem -1rem; }
            &.i13 { background-position: -2rem -1rem; }
            &.i14 { background-position: -3rem -1rem; }
            &.i15 { background-position: -4rem -1rem; }
            &.i16 { background-position: -5rem -1rem; }
            &.i17 { background-position: -6rem -1rem; }
            &.i18 { background-position: -7rem -1rem; }
            &.i19 { background-position: -8rem -1rem; }
            &.i20 { background-position: -9rem -1rem; }
            &.i21 { background-position: 0rem -2rem; }
            &.i22 { background-position: -1rem -2rem; }
            &.i23 { background-position: -2rem -2rem; }
            &.i24 { background-position: -3rem -2rem; }
            &.i25 { background-position: -4rem -2rem; }
            &.i26 { background-position: -5rem -2rem; }
            &.i27 { background-position: -6rem -2rem; }
            &.i28 { background-position: -7rem -2rem; }
            &.i29 { background-position: -8rem -2rem; }
        }
    }
}
.how-serve-2 li { width: 50%; }

// 法律服务
// 企业法律顾问
.counselor { 
    .mod-02 { padding-bottom: 0.4rem;
        .why-list { width: 7.2rem; margin: 0 auto;
            li { display: flex;  align-items: center; padding: 0.25rem 0; border-bottom:1px solid $bordercolor; 
                &:first-child { padding-top: 0; }                
                img { width: 1.5rem; height:auto; margin-right: 0.3rem;  }
                .text { flex: 1; }
                h4 { margin-bottom: 0.1rem; color: $blue; font-size: 0.3rem; }
            }
        }
    }
    .mod-03 { padding-bottom: 0.2rem;
        .counselor-list { display: flex; flex-wrap: wrap;  
            li { display: flex; flex-direction: column; color: #969696; margin-left:0.2rem; align-items: center; text-align: center; min-width:3.45rem;background: #fff; margin-bottom: 0.2rem; width:3.4rem; height: 3.2rem; font-size: 0.26rem; box-sizing: border-box; padding: 0.3rem 0.15rem;
                i { width: 1rem; height: 1rem; display: block; background-color: $yellow; background-position:0  -9rem; border-radius: 50%; 
                    &.i02 { background-position-x: -1rem; }
                    &.i03 { background-position-x: -2rem; }
                    &.i04 { background-position-x: -3rem; }
                }
                h4 { color: #000;  margin-top: 0.2rem; }
                img { width: 100%; }
            }
        }   
        .to-ask { display: block; width: 2rem; border-radius: 0.26rem; box-sizing: border-box; height: 0.52rem; line-height: 0.50rem; border: 1px solid $blue; color: $blue; text-align: center; margin:0.3rem auto; }        
    }
    .mod-04 { border-bottom:1px solid #ddd; padding-bottom: 0.2rem;
        .case-list-wrap { width: 100%; overflow-x:scroll; }
        .case-list{  @extend .clearfloat; padding-right: 0.2rem; display: flex;
            li {  min-width: 5.2rem; width: 5rem!important; background:#fff; padding: 0.1rem;
                &:first-of-type { margin-left:0.2rem; }
                img { width: 100%; height:auto;  border: 1px solid #ddd; }
                h4 { font-size: 0.26rem; padding: 0.1rem 0.2rem; color:#000; }
            }
        }
    }
}

// 投融资顾问
.invest { 
    .mod-01 { 
        .service-list { width: 7.2rem; margin: 0 auto;
            li { display: flex; align-items: center; padding: 0.25rem 0.2rem 0.25rem 0; border-bottom:1px solid $bordercolor; 
                &:first-child { padding-top: 0; }
                &:last-child { border: none; }
                i { margin-right: 0.3rem; width:1.2rem; height: 1.2rem; background-color:$yellow; border-radius:50%;  @extend .icon-01; background-position-y:-6.9rem;
                    &.i1 { background-position-x:0.1rem;}
                    &.i2 { background-position-x:-0.9rem;}
                    &.i3 { background-position-x:-1.9rem;}
                    &.i4 { background-position-x:-2.9rem;}
                    &.i5 { background-position-x:-3.9rem;}
                }
                .text {flex:1; }
                h4 { font-size: 0.3rem; color:$blue; }
            }
        }
    }
    .mod-02 {
        .invest-step-list { width: 7.2rem; margin: 0 auto;
            li { display: flex; align-items: center; padding: 0.25rem 0; border-bottom:1px solid $bordercolor; 
                &:last-child { border: none; }                
                img { width: 3rem; height:2rem; margin-right: 0.3rem;  }
                .text { flex: 1; }
                h4 { margin-bottom: 0.1rem; color: $blue; font-size: 0.3rem; }
            }
        }
    }
    .mod-03 { padding-bottom: 0.2rem;
        .case-list-wrap { width: 100%; overflow-x:scroll; }
        .case-list{  @extend .clearfloat; padding-right: 0.2rem; display: flex;
            li {  width: 5rem; background:#fff; padding: 0.1rem; box-sizing: border-box;
                &:first-of-type { margin-left:0.2rem; }                
                img { width: 100%; height:auto; }
                h4 { font-size: 0.26rem; padding: 0.1rem 0.2rem; color:#000; }
            }
        }
    }
}

// 股权架构设计
.stock { 
    .mod-01 { background:#f5f5f5 url(../images/service/stock/mod_bg_01.jpg) no-repeat center 200px; padding-top:70px; height:800px; 
        .question-list{ margin-top:130px; padding-left:640px;
            li { color:$gray; font-size: 18px; line-height: 30px; height:30px; margin-bottom: 20px;
                em { float:left; width:30px; font-size: 24px; margin-right:15px; text-align: center; background: $yellow; color: #000; border-radius: 4px; }
            }
        }
        .go-ask {  margin: 140px auto; display: block; width: 150px; text-align: center; }  
    }
    .mod-02 { border-bottom:1px solid #ddd; padding-bottom: 0.2rem;
        .case-list-wrap { width: 100%; overflow-x:scroll; }
        .case-list{  @extend .clearfloat; padding-right: 0.2rem; display: flex;
            li {  min-width: 5rem; width: 5rem; background:#fff;
                &:first-of-type { margin-left:0.2rem; }                                
                img { width: 100%; height:auto; }
                h4 { font-size: 0.3rem; color:#000; }
                .text { padding: 0.1rem 0.2rem; color: #969696; }
            }
        }
    }
    .mod-03 { padding-bottom: 0.4rem;
        .q-list{ display: flex;
            li {flex:1; text-align: center;
                img { width:1.5rem; margin: 0 auto; }
                h4 { font-size: 0.3rem; color: $blue;  }
            }
        }
    }
    .mod-04 {
        .s-list { 
            li { display: flex; border-bottom: 1px solid #eee; align-items: center; padding: 0.4rem 0;
                &:first-child { padding-top: 0.2rem; }
                em { color:$blue; }
                i { margin-left: 0.3rem; margin-right:0.3rem; width:0.8rem; height: 0.8rem; background:url(../images/service/stock/icon_01.png); background-size: 4.8rem 0.8rem; 
                    &.i2 { background-position-x: -.8rem; }
                    &.i3 { background-position-x: -1.6rem; }
                    &.i4 { background-position-x: -2.4rem; }
                    &.i5 { background-position-x: -3.2rem; }
                    &.i6 { background-position-x: -4.0rem; }
                }
                b { display: block; font-size: 0.36rem; color:#333; }
                p { width: 5.6rem; }
                .p1 { margin-top:30px; }
                .p3 { margin-top:0px; }
            }
        }
    }
}

// 股权激励方案
.stimulate { 
    .mod-01 { height:7rem; background: url(../images/service/stimulate/mod_bg_01.jpg) no-repeat center 5.9rem; background-size:3.17rem auto;
        .good-list { @extend .clearfloat; display: flex; flex-wrap: wrap;
            li { flex:1; min-width: 30%; text-align: center; color: #959595; font-size: 0.18rem; margin-bottom:0.3rem;
                img { width:1.2rem; margin: 0 auto; text-align: center; }
                h4 { font-size: 0.24rem; color:#282828; }
            }
        }
    }
    .mod-02 { padding:0 0.1rem 0.1rem 0.1rem; }
    .mod-03 { padding:0 0.1rem 0.4rem 0.1rem;
        .case-list{ 
            li { display: flex; color: $gray;  height: 1.9rem; margin-bottom:0.25rem; 
                img { display: block; width:3.3rem; height:1.9rem; }
                .text { flex: 1; justify-content: center; flex-direction: column; padding: 0.15rem; display: flex; border:1px solid #eee; box-sizing: border-box; height: 1.9rem; }
                h4 { font-size: 0.3rem; margin-bottom: 0.1rem; text-transform: uppercase;
                    em { color:$blue; margin-right: 0.1rem; }
                }
            }
        }
        .go-ask { margin:0.1rem auto; }
    }
    .mod-04 { padding-bottom: 0.2rem;
        .service-list{ 
            li { margin:0 auto; display: flex; align-items: center; justify-content:center; background: url(../images/item_bg_01.png); background-size: 100% 100%; margin-bottom: 0.2rem; width:7.26rem; height: 2.2rem; color:$gray;
                i { @extend .icon-01; width: 1.3rem; height: 1.3rem; background-color:$yellow; background-position: 0.15rem -4.9rem;  border-radius:50%;
                    &.i2 { background-position-x: -0.85rem; }
                    &.i3 { background-position-x: -1.9rem; }
                    &.i4 { background-position-x: -2.9rem; }
                }
                .text {  width:4.1rem; margin-left:0.4rem; }
                h4 { color:$blue; font-size: 0.3rem; }
            }
        }
    }
}

// 劳动风险防范
.risk { 
    .mod-01 { 
        .case { display: flex; justify-content: space-around; 
            &.case-01 { border-bottom: 1px solid #eee; margin-bottom:0.3rem; }
            img { width:1.2rem; height:1.3rem; }
            .text { width:5.75rem; padding-bottom: 0.3rem;
                .p1 { padding-bottom:0.3rem; background: url(../images/service/risk/bg.jpg) no-repeat center bottom; background-size:100% auto; }
                h4 { margin:0.2rem 0 0.1rem 0; border: 1px solid $blue; width: 0.8rem; line-height: 1.2; font-size: 0.3rem; border-radius: 4px; text-align: center; }
            }
        }     
        ul { padding:0 0.1rem;
            li { display: flex; padding:0.2rem 0;  border-bottom: 1px solid #eee; 
                &:first-child { padding-top: 0; }
                span { width: 0.44rem; height: 0.44rem; font-size: 0.24rem; color: #000; text-align: center; background: $yellow; border-radius: 50%; }
                p { flex: 1; margin-left: 0.3rem; }
            }
        }   
        .to-ask { display: block; width: 3.4rem; border-radius: 0.26rem; box-sizing: border-box; height: 0.52rem; line-height: 0.50rem; border: 1px solid $blue; color: $blue; text-align: center; margin:0.3rem auto; }        
    }
    .mod-03 { 
        .h-list{ padding:0 0.1rem;
            li { padding:0.2rem 0; display: flex; border-bottom: 1px solid #eee; 
                &:last-child { border:none; }
                img { width:2.7rem; height:1.8rem; margin-right:0.2rem; }
                h4 { font-size: 0.32rem; color: #000; margin-bottom: 0.05rem; margin-top: 0.1rem; }
            }
        }
    }
}

// 找律师打官司
.lawsuit { 
    .mod-01 { padding: 0 0.1rem;
        dl { width: 7.2rem; margin: 0 auto; border-bottom: 1px solid $bordercolor;
            dt { color: $black; line-height: 1rem; height: 1rem; font-size: 0.3rem;
                i { float: left; width: 0.8rem; height: 1rem; @extend .icon-01; background-position-y: -6rem;
                    &.i1 { background-position-x:-0.2rem; }
                    &.i2 { background-position-x:-1.2rem; }
                    &.i3 { background-position-x:-2.2rem; }
                    &.i4 { background-position-x:-3.2rem; }
                    &.i5 { background-position-x:-4.2rem; }
                    &.i6 { background-position-x:-5.2rem; }
                    &.i7 { background-position-x:-6.2rem; }
                    &.i8 { background-position-x:-7.2rem; }
                }
                span { float: right; color: $gray; transition: all 0.7s ease; }
                &.active span { color: $blue; transform: rotate(180deg);}
            }
            dd { line-height: 2; padding:0 0 0.2rem 0.8rem ; display: none;
                em { color: $blue; margin-right: 0.1rem; }
            }
        }    
        ul { display: flex; flex-wrap: wrap; border-bottom: 1px solid #e4e4e4; }
        li { width: 25%; color: $black; display: flex; flex-direction: column; align-items: center;  margin-bottom: 0.3rem;
            i { display:block; width: 0.8rem; height: 0.6rem; @extend .icon-01; background-position-y: -6.2rem; margin-bottom: 0.1rem;
                &.i1 { background-position-x:-0.1rem; }
                &.i2 { background-position-x:-1.1rem; }
                &.i3 { background-position-x:-2.1rem; }
                &.i4 { background-position-x:-3.1rem; }
                &.i5 { background-position-x:-4.1rem; }
                &.i6 { background-position-x:-5.1rem; }
                &.i7 { background-position-x:-6.1rem; }
                &.i8 { background-position-x:-7.1rem; }
            }
            span { float: right; color: $gray; transition: all 0.7s ease; }
            &.active span { color: $blue; transform: rotate(180deg);}
        }
        .to-ask { display: block; width: 3.4rem; border-radius: 0.26rem; box-sizing: border-box; height: 0.52rem; line-height: 0.50rem; border: 1px solid $blue; color: $blue; text-align: center; margin:0.3rem auto; }        
    }
    .mod-03 { 
        img { display: block; margin: 0 auto; width: 3.14rem; }
        table { border-collapse: collapse; width: 7.2rem; margin: 0.1rem auto; margin-top: 0.3rem;
            tr { border-bottom: 1px solid $bordercolor; 
                &:last-child { border: none; }
            }
            td { padding: 0.2rem 0; }
            i { margin:0 auto; font-style: normal; background: $yellow; width: 1.1rem; text-align: center; border-radius:4px; display: block; }
        }
    }
    .mod-04 {padding-bottom: 0.4rem ;
        form { padding: 0 0.15rem; 
            .form-item { display: flex; justify-content: space-between;
                input { display: block; box-sizing: border-box; height: 0.7rem; padding: 0.15rem 0.2rem; resize: none; width: 3.5rem; font-size: 0.24rem; line-height: 1.5; border-radius: 4px; border: none;} 
            }
            textarea { margin: 0.2rem auto; display: block; box-sizing: border-box; height: 2rem; padding: 0.15rem 0.2rem; resize: none; width: 100%; font-size: 0.24rem; line-height: 1.5; border-radius: 4px; border: none; }
            .submit { text-align: center; color: #000; background: $yellow; display: block; box-sizing: border-box; height: 0.7rem; padding: 0.15rem 0.2rem; resize: none; width: 100%; font-size: 0.24rem; line-height: 1.5;border-radius: 4px; }             
        }
        // <form action="">
        //     <div class="form-item">
        //         <input type="text" placeholder="您的名字" />
        //         <input type="text" placeholder="您的手机号" />
        //     </div>
        //     <textarea name="" placeholder="请简单描述您的法律问题，我们会根据您描述的问题分配律师与您电话沟通" id="" cols="30" rows="10"></textarea>
        //     <a href="javascript:;" class="submit">免费获取</a>
        // </form>
    }
}

// 自助打官司
.selfsuit { 
    .mod-01 { padding-bottom: 1px;
        .q-list { width: 7.2rem; margin: 0 auto;
            li { display: flex; align-items: center; padding: 0.3rem 0; border-bottom:1px solid $bordercolor; 
                img { width: 1.5rem; height:1.5rem; margin-left: 0.4rem; margin-right: 0.4rem; }
                .text {flex: 1; }
                h4 { font-size: 0.3rem; margin-bottom: 0.1rem; }
                em { color:$blue; margin:20px 0 10px 0; text-align: center; }
            }
        }
        .to-ask { display: block; width: 4.4rem; border-radius: 0.22rem; box-sizing: border-box; height: 0.44rem; line-height: 0.44rem; border: 1px solid $blue; color: $blue; text-align: center; margin:0.3rem auto; }
    }
    .mod-02 { padding-bottom: 0.4rem;
        .case-list { width: 7.2rem; margin: 0 auto;
            li { display: flex; align-items: center; padding: 0.25rem 0; border-bottom:1px solid $bordercolor; 
                img { width: 2.7rem; height:2.2rem; margin-right: 0.3rem;  }
                .text { flex: 1; }
                h4 { margin-bottom: 0.1rem; }
            }
        }
    }
    .mod-03 { padding: 0 0.15rem 0.3rem 0.15rem;
        table { width: 100%; border-collapse: collapse; 
            td ,th { border: 1px solid #eee; padding:0.1rem; 
                &:nth-of-type(3n+3) { text-align: center; }
            }
            td:nth-of-type(3n+3) { color:$blue; }
            th { color:$blue;  }
        }
    }
    .mod-04 { 
        .s-list { width: 7.2rem; margin: 0 auto;
            li { display: flex; align-items: center; padding: 0.25rem 0.2rem 0.25rem 0; border-bottom:1px solid $bordercolor; 
                i { margin-right: 0.3rem; width:1.2rem; height: 1.2rem; background-color:$yellow; border-radius:50%;  @extend .icon-01; background-position-y:-4.9rem;
                    &.i1 { background-position-x:-4.9rem;}
                    &.i2 { background-position-x:-5.9rem;}
                    &.i3 { background-position-x:-6.9rem;}
                    &.i4 { background-position-x:-7.9rem;}
                }
                .text {flex:1; }
                h4 { font-size: 0.3rem; color:$blue; }
            }
        }
    }
}

// 律师函
.lawletter { 
    .mod-01 {
        .s-list { padding:0 0.1rem;
            li { padding: 0.2rem 0; border-bottom: 1px solid #eee; display: flex; align-items: center;
                &:last-child { border: none; }
                img { width:1.7rem; height:1.7rem; margin-right: 0.3rem; }
                div { 
                    h5 { font-size: 0.24rem; margin-top:0.1rem; letter-spacing: 1px;
                        em { color:$blue; }
                    }
                    h4 { color:$blue; font-size: 0.3rem; margin-bottom:0.1rem; }
                }
            }
        }
    }
    .mod-02 { padding-bottom: 1px;
        .mod-title {color:#fff; 
            h2 { color:#fff;  }
        }
        .s-list {
            li { flex-direction: column; justify-content: center; align-content: flex-start; text-align:left; margin:0 auto; width:7.26rem; height:1.5rem; box-sizing:border-box; padding:0.2rem 0.35rem; display: flex; background:url(../images/service/lawletter/item_bg.png); background-size:100% 100%;; margin-bottom: .2rem;
                h4 { font-weight: 400; color:$blue; margin-bottom: 0.05rem; }
            }
        }
    }
    .mod-03 { 
        img { display: block; margin: 0 auto; width: 3.14rem; }
        table { border-collapse: collapse; width: 7.2rem; margin: 0.1rem auto; margin-top: 0.3rem;
            tr { border-bottom: 1px solid $bordercolor; 
                &:last-child { border: none; }
            }
            td { padding: 0.2rem 0; }
            i { margin:0 auto; font-style: normal; background: $yellow; width: 0.3rem; text-align: center; border-radius:4px; display: block; }
        }
    }
}

